<template>
    <div class="outDiv">
        <table>
            <tbody>
                <tr>
                    <td>背景颜色</td>
                    <td>
                        <select v-model="selectedColor" @change="updateBackground">
                            <option v-for="(color, index) in colorOptions" :key="index" :value="color.value">
                                {{ color.label }}
                            </option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const colorOptions = ref([
    { label: '默认', value: '#7179e2' },
    { label: '尘埃的草', value: 'linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)' },
    { label: '年轻的激情', value: 'linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)' },
    { label: '美味的水蜜桃', value: 'linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)' },
    { label: '阳光明媚的早晨', value: 'linear-gradient(120deg, #f6d365 0%, #fda085 100%)' }
]);

const selectedColor = ref(localStorage.getItem('color'));

function updateBackground() {
    localStorage.setItem('color', selectedColor.value)
    location.reload();
}
</script>
<style scoped>
.outDiv {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    border-collapse: collapse;
    width: 60%;
    font-family: cursive;
    font-size: 16px;
    text-align: center;
    letter-spacing: 2px;
}

td {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
}

table select {
    padding: 8px;
    font-family: cursive;
    border: none;
    background-color: transparent;
    font-size: 16px;
    outline: none;
}
</style>